<template>
  <div id="div1">
    <h3>物业注册</h3>
    <el-input placeholder="请输入小区名字"
              @input="inputchange"
              @change="villagechange"
              v-model="input1">
      <template slot="prepend">小区：</template>
    </el-input><br>
    <font id="font1"></font><br>
    <h3></h3>
    <el-input placeholder="请输入物业账号的用户名"
              @input="inputchange"
              @change="checkaccount"
              v-model="input2">
      <template slot="prepend">用户名：</template>
    </el-input><br>
    <font id="font2"></font><br>
    <el-button type="success"
               plain
               @click="commit">注册</el-button>
  </div>
</template>

<script>
import axios from '../../../axios_config';
import Commons from '../../../js/commons'
export default {
  data () {
    return {
      input1: "",
      input2: ""
    }
  },
  methods: {
    inputchange (e) {
      this.$forceUpdate();
    },
    villagechange () {
      if (this.input1 != null && this.input1 != "") {
        axios.get("http://192.168.11.18:8080/community/haveCommunity?community=" + this.input1).then(res => {
          if (res.data.state != "SUCCESS") {
            document.getElementById("font1").textContent = "× 此小区名不能注册";
            this.input1 = "";
          } else {
            document.getElementById("font1").textContent = "";
          }
        })
      }
    },
    checkaccount () {
      if (this.input2 != null && this.input2 != "") {
        axios.get("http://192.168.11.18:8080/user/checkVillage?account=" + this.input2).then(res => {
          if (res.data.state != "SUCCESS") {
            document.getElementById("font2").textContent = "× 此用户名不能注册";
            this.input2 = "";
          } else {
            document.getElementById("font2").textContent = "";
          }
        })
      }
    },
    commit () {
      if (this.input1 != null && this.input1 != "" && this.input2 != null && this.input2 != "") {
        axios.post("http://192.168.11.18:8080/user/registerProperty", { account: this.input2, community: this.input1 }).then(res => {
          console.log(res);
        })
      } else {
        alert("请填写完整注册信息！");
      }
    },
  }
}
</script>

<style scoped>
h3 {
  margin-bottom: 15%;
}
#div1 {
  width: 50%;
  margin: 0% 10%;
  padding: 5% 5%;
}
font {
  margin-left: 80%;
  font-size: 50%;
  color: red;
}
button {
  width: 20%;
  margin-left: 80%;
  margin-top: 12%;
}
</style>